<template>
    <!--设施统计-->
    <div class="right_facility_statistics">
        <div class="facility">
            <div class="electricity_facilities">
                <CommonTitleComponent text="电力设施"></CommonTitleComponent>
                <div class="electricity" v-for="(item, index) in state.facilitytitle" :key="index">
                    <div>
                        <img :src="item.back" alt="" />
                    </div>
                    <div>
                        <span>{{ item.num }}</span>
                        <span>{{ item.name }}</span>
                    </div>
                </div>
            </div>
            <div class="electricity_facilities">
                <CommonTitleComponent text="消防设施"></CommonTitleComponent>
                <div class="fireFight">
                    <div class="electricity" v-for="(item, index) in state.fireFightList" :key="index">
                        <div>
                            <img :src="item.back" alt="" />
                        </div>
                        <div>
                            <span>{{ item.num }}</span>
                            <span>{{ item.name }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive, onMounted } from 'vue';
import Electricityback1 from '@/assets/image/transformer.png';
import Electricityback2 from '@/assets/image/controller.png';
import Electricityback3 from '@/assets/image/highVoltage.png';
import fireFightback1 from '@/assets/image/firehydrant.png';
import fireFightback2 from '@/assets/image/manholeCover.png';

const state = reactive({
    facilitytitle: [
        {
            back: Electricityback1,
            name: '变压器(个)',
            num: '12'
        },
        {
            back: Electricityback2,
            name: '集控器(个)',
            num: '2'
        },
        {
            back: Electricityback3,
            name: '高压线路(个)',
            num: '20'
        }
    ],
    fireFightList: [
        {
            back: fireFightback1,
            name: '消防栓(个)',
            num: '20'
        },
        {
            back: fireFightback2,
            name: '井盖(个)',
            num: '11'
        }
    ]
});
</script>

<style scoped lang="scss">
.right_facility_statistics {
    .facility {
        display: flex;
        justify-content: space-between;
        > div {
            width: 50%;
        }
        .electricity_facilities {
            .titles {
                margin: 6px 0;
            }
            .electricity {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-top: 3px;
                padding: 3px 12px;
                margin-right: 5px;
                background: url(@/assets/image/facilityback.png) no-repeat;
                background-size: 100% 100%;
                > div {
                    &:nth-of-type(1) {
                        width: 40%;
                        img {
                            width: 28px;
                            height: 32px;
                        }
                    }
                    &:nth-of-type(2) {
                        width: 60%;
                        position: relative;
                        span {
                            display: block;
                            width: 100%;
                            &:nth-of-type(1) {
                                font-size: 16px;
                                font-family: PangMenZhengDao;
                                color: #f0f6f5;
                                line-height: 9px;
                                margin-bottom: 3px;
                            }
                            &:nth-of-type(2) {
                                font-size: 8px;
                                font-family: Source Han Sans CN;
                                color: #b4c1bf;
                            }
                        }
                    }
                }
            }
        }
        .fireFight {
            display: flex;
            flex-wrap: wrap;
            height: 85%;
            align-content: center;
            .electricity {
                width: 100%;
                margin-left: 5px;
                margin-right: 0px;
                margin-bottom: 12px;
            }
        }
    }
}
</style>
